// 组件中提交数据到Mutaions然后更改状态值最后我们再重新提交给组件二次渲染
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex) // 调用Vuex状态管理器

// export default new Vuex.Store({ // 这个是创建和暴露写在一块的,我们可以分开来
//   state: {
//   },
//   mutations: {
//   },
//   actions: {
//   },
//   modules: {
//   }
// })
// 将以上这块代码拆分开为创建和暴露两块
// 01.设置状态管理器初始值
const store = new Vuex.Store({
  state: { // 这个就是我们项目中所需要用到的数据的状态初始值的地方
    a: 1,
    b: 2,
    c: 3
  },
  // 02.定义更改初始状态的方法
  mutations: { // 唯一的改变状态的地方
    changeA (state) { // 在其中定义一个改变状态值得函数,通过 state.状态 的修改赋值之类的,就能更改我们的状态初始值了
      state.a = '11'
    },
    changeB (state, data) { // 第二个参数就是我们组件中能传过来的参数,更改状态
      state.b = data
    },
    changeC (state, data) {
      state.c = data.payload // 这样写的话我们就需要将参数传进来的时候传一个对像的格式了
    }
  }
})

// 03.触发方法并传参
// 那么我们更改了状态之后还需要使用commit来将这个更改后的值提交给store,这样我们才能触发这个方法然后就可以将这个状态更改成功
store.commit('changeA') // 这个是写死的不需要传值,直接调用触发即可
store.commit('changeB', '22') // 第一个是我们在mutations中哦给你定义的更改这个值得函数,第二个是我们需要传过去得值
// store.commit('changeC', { // 对象写法一
//   payload: '33'
// })
store.commit({ // 对象写法二
  type: 'changeC',
  payload: '33'
})

// 将这个变量暴露出去,这个是再我们的入口文件index.js中已经引入了
export default store
